<template>
  <div class="movie-header">
    <span
      :class="tabIndex === index ? 'active' : ''"
      @click="handleTabClick(item, index)"
      v-for="(item, index) in movieList"
      :key="item.id"
    >
      {{ item.name }}
    </span>
  </div>
</template>

<script>
export default {
  // props接收父组件传递过来的数据
  // props: ['tabIndex', 'movieList'],
  props: {
    tabIndex: {
      type: Number,
    },
    movieList: {
      type: Array,
    },
  },
  methods: {
    // 当碰到事件在子组件内部的时候，需要将要处理的逻辑告诉父组件，让父组件来处理相应的逻辑
    handleTabClick(item, index) {
      // 子向父传递参数(子向父 传递了一个tabClick的事件，并且带了一个index的参数，父组件就能接收到这个参数)
      // 父组件通过监听这个tabClick就能拿到子组件传递的参数
      this.$emit('tabClick', index)
    },
  },
}
</script>

<style></style>
